<template>
    <div class="process-box" :style="{ width: totalWidth + 'px' }">
        <div class="play-box" :style="{ width: playWidth + 'px' }">
            <el-icon v-if="playStatus">
                <VideoPlay @click="videoStart" />
            </el-icon>
            <el-icon v-else>
                <VideoPause @click="videoStop" />
            </el-icon>
        </div>
        <div class="draggable-progress" ref="progressBarRef">
            <el-progress :color="'#00FF0055'" @click="processTap" textInside :strokeWidth="strokeWidth" :striped="true"
                :percentage="parseFloat(percentage).toFixed(2)" show-text></el-progress>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

let props = defineProps({
    width: {
        type: Number,
        default: 500
    },
    height: {
        type: Number,
        default: 400
    }
})

const percentage = ref(0); // 初始进度

const xTotalNum = ref(365); // x轴数据个数

const progressBarRef = ref(null);
const eveSize = ref(100 / xTotalNum.value); // 根据x轴划分进度：每段进度数

let strokeWidth = ref(16)
let playStatus = ref(true) // 播放状态
let playWidth = ref(30)
let totalWidth = ref(800)

const videoStop = () => {
    console.log('videoStop...');
    playStatus.value = true;
    stopTimer()
}
const videoStart = () => {
    console.log('videoStart...');
    playStatus.value = false;
    startTimer()
}

const processTap = (event) => {
    console.log(event);
    console.log('距离左侧像素', event.offsetX);
    console.log('元素总宽度', event.width);
}

let timerId = null;
let stopTimer = () => {
    if (timerId) {
        clearInterval(timerId);
        timerId = null;
        console.log('Timer stopped');
    }
}
let startTimer = () => {
    timerId = setInterval(() => {
        if (percentage.value < 100) {
            percentage.value += eveSize.value
        } else {
            percentage.value = 100
        }
    }, 100); // 每隔1秒增加计数器
}
onMounted(() => {

});

onUnmounted(() => {
});

</script>

<style scoped>
.process-box {
    margin-top: 10px;
    display: flex;
    align-items: center;

    .play-box {
        display: flex;

        .el-icon {
            align-self: center;
            cursor: pointer;
            font-size: 18px;
        }
    }

    .draggable-progress {
        flex: 1;
        position: relative;
        padding: 0px 0px;
    }
}
</style>